<template>
  <!-- 富文本编辑器 -->
  <div class="pho-form-item">
    <van-field
      class="form-input-hidden"
      v-bind="$attrs"
      :value="value"
      :required="required"
      :disabled="disabled"
      readonly
      input-align="right"
      :labelWidth="labelWidth"
    >
      <template #label>
        <span>{{ label }}</span>
        <VoiceTxtarea :readOnly="readonly" @vc="getVc($event)" :old-value="value" />
      </template>
    </van-field>
    <div class="pho-form-cont">
      <div class="form-components">
        <div v-if="readonly" class="form-readonly"></div>
        <div v-if="disabled" class="form-disabled"></div>
        <RichEditor
          :value="value"
          :placeholder="placeholder"
          :readonly="readonly || disabled"
          :maxlength="parseInt(maxlength)"
          :height="height"
          :transcoding="transcoding"
          @input="getRickTextContent"
        />
      </div>
    </div>
  </div>
</template>

<script>
import RichEditor from "@/plugins/richEditor/richEditorPhone";
import VoiceTxtarea from "@/plugins/voiceTxtarea/voiceTxtarea";
export default {
  name: "phone-form-rich-text",
  components: {
    VoiceTxtarea,
    RichEditor
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update"
  },
  props: {
    // 绑定的输入值
    value: {
      default: ""
    },

    // 是否只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 占位语
    placeholder: {
      type: String,
      default: "请输入"
    },
    // 最大输入长度
    maxlength: {
      type: String,
      default: "20000"
    },
    height: {
      type: [String, Number],
      default: ""
    },
    // 是否开启转码
    transcoding: {
      type: Boolean,
      default: true
    },
    // label标题
    label: {
      type: String,
      default: ""
    },
    // label标题的宽度
    labelWidth: {
      type: String,
      default: "8em"
    },
    // 是否必填
    required: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },

  methods: {
    //获取富文本内容
    getRickTextContent(v) {
      this.$emit("update", v);
    },
    // 获取语音内容
    getVc(val) {
      const vv = val;
      this.$emit("update", vv);
    }
  }
};
</script>

<style lang="scss">
.hu-rich-text {
  .van-field__label {
    display: flex;
    justify-content: space-between;
  }
}
</style>
